<script>
import Form from './index.vue'
export default {
  components: {
    Form
  },
  props: {
    title: {
      type: String,
      default: '家庭成员'
    },
    width: {
      default: '50%'
    },
    value: {
      type: Object,
      required: true,
      default() {
        return null
      }
    },

    confirmText: {
      default: '确 定'
    },
    confirmBtnLoading: {
      type: Boolean,
      default: false
    },
    confirmBtnDisabled: {
      type: Boolean,
      default: false
    },

    cancelText: {
      default: '取 消'
    },
    cancelBtnDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(form) {
        this.$emit('input', { ...form })
      }
    },
    attrs() {
      const attrs = { ...this.$attrs }

      attrs['title'] = this.title
      attrs['width'] = this.width

      // 移除非 Dialog 的属性
      const unnecessaryAttrs = [
        'confirmText',
        'confirmBtnLoading',
        'confirmBtnDisabled',

        'cancelText',

        'value'
      ]

      for (const attr of unnecessaryAttrs) { delete attrs[attr] }

      return attrs
    },
    listeners() {
      const listeners = { ...this.$listeners }

      const unnecessaryListener = [
        'input'
      ]

      for (const listener of unnecessaryListener) { delete listeners[listener] }

      return listeners
    },
    hasFooterSlot() {
      return this.$slots.footer !== undefined
    }
  },
  methods: {
    async handleConfirm() {
      const valid = await this.$refs.form.valid()
      if (!valid) return
      this.$emit('confirm')
    },
    handleCancel() {
      this.$emit('cancel')
    },
    resetFields() {
            this.$refs['form']?.resetFields?.()
    }
  }
}
</script>

<template>
  <el-dialog
    v-bind="attrs"
    v-on="listeners"
  >
    <Form
      ref="form"
      :value="value"
      :political-options="$attrs['political-options']"
      @input="$listeners.input"
    />
    <div
      slot="footer"
      class="dialog-footer"
    >
      <slot
        v-if="hasFooterSlot"
        slot="footer"
        name="footer"
      />

      <template v-else>
        <el-button
          :disabled="cancelBtnDisabled"
          @click="handleCancel"
        >
          {{ cancelText }}
        </el-button>

        <el-button
          type="primary"
          :loading="confirmBtnLoading"
          :disabled="confirmBtnDisabled"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </el-button>
      </template>
    </div>
  </el-dialog>
</template>

<style lang="scss"></style>
